<template>
	<view class="post-details">
		<view class="content">
			<view class="banner slider-banner product-bg" :style="CustomHright">
				<swiper class="swiper-wrapper" @change="handleChange" v-if="imgUrls.length > 0" :style="CustomHright">
					<block v-for="(item, imgUrlsIndex) in imgUrls" :key="imgUrlsIndex">
						<swiper-item>
							<image mode="widthFix" :style="CustomStyle" :src="item" @tap="previewImage(imgUrlsIndex)" class="slide-image" :class="'images_'+ imgUrlsIndex"
							 :id="'images_'+ imgUrlsIndex" />
						</swiper-item>
					</block>
				</swiper>
				<view class="pages">{{ currents || 1 }}/{{ imgUrls.length || 1 }}</view>
			</view>
			
			<view class="information">
				<view class="title">
					城内妇女节你我问你才那次那我草拟为我
				</view>
				<view class="text">
					每次为你你猜呢财务我问你辞了你才那次那我草拟为我万能充那次我那次你问才能为你那次我女巫
				</view>
				
				<view class="user-info">
					<view class="left">
						<image src="https://h5.ylsp.vip/file/static/user.png" mode=""></image>
					</view>
					<view class="right">
						<view class="name">
							Evan
						</view>
					</view>
				</view>
				
				<view class="time">
					2020-12-31 14:36:38
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const NAME = "details";
	export default {
		data() {
			return {
				currents: 1,
				CustomStyle: '',
				CustomHright: '',
				imgUrls: [
					"https://h5.ylsp.vip/file/static/pnt-01.png"
				]
			}
		},
		watch: {
			$yroute(n) {
				if (n.name === NAME) {



				}
			}
		},
		onReady: function(){
			this.CalcBoxHeight(this.currents)
		},
		onLoad: function() {
			// this.CalcBoxHeight(this.currents)
		},
		methods: {
			handleChange(event) {
				this.currents = event.mp.detail.current + 1;
				this.CalcBoxHeight(this.currents)
			},
			CalcBoxHeight(id) {
				let Indexes = id - 1;
				// let goodsVal = uni.createSelectorQuery().select('images_' + id);
				let goodsVal = uni.createSelectorQuery().select('.images_' + Indexes);
				goodsVal.boundingClientRect((data) => {
					console.log(data);
					this.CustomStyle = "height:" + data.height + "px;width:" + data.width + "px;"
					this.CustomHright = "height:" + data.height + "px;"
					console.log(this.CustomStyle)
					console.log(this.CustomHright)
				}).exec()
				console.log(goodsVal);
				console.log(id);
				console.log(this.imgUrls[Indexes])
			},
			previewImage(current) {
				console.log(current)
				uni.previewImage({
					current,
					urls: this.imgUrls,
				});
			}
		}
	}
</script>

<style lang="less">
	.post-details {
		height: 100%;
		width: 100%;
		background-color: #F9F9F9;
		
		.content {
			overflow-y: auto;
			background-color: #ffffff;
			padding-bottom: 50rpx;
		
			.banner {
				width: 100%;
			}
			
			.information{
				width: 100%;
				box-sizing: border-box;
				height: auto;
				padding: 40rpx 30rpx 0 30rpx;
				overflow: hidden;
				
				.title{
					font-size: 38rpx;
					font-weight: 900;
					color: #000000;
				}
				.text{
					font-size: 28rpx;
					color: #666666;
					margin-top: 30rpx;
				}
				
				.user-info{
					position: relative;
					height: 140rpx;
					width: 100%;
					
					.left{
						height: 100%;
						width: 100rpx;
						float: left;
						text-align: center;
						image{
							height: 80rpx;
							width: 80rpx;
							border-radius: 10rpx;
							margin-top: 30rpx;
						}
					}
					
					.right{
						width: calc(100% - 100rpx);
						float: left;
						height: 100%;
						box-sizing: border-box;
						padding-left: 20rpx;
						
						.name{
							font-size: 28rpx;
							height: 100%;
							color: #666666;
							line-height: 140rpx;
						}
					}
					
				}
				
				.time{
					height: 60rpx;
					width: 100%;
					line-height: 60rpx;
					font-size: 26rpx;
					color: #999999;
				}
			}
		}
	}
</style>
